<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <div class="order_table">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-input v-model="order_queryInfo.query" placeholder="请输入内容" class="order_search_input" clearable @clear="getOrderList">
                            <el-button slot="append" icon="el-icon-search" class="order_search_button" @click="getOrderList"></el-button>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
<!--                        <el-button type="primary" class="order_add_button" @click="order_add_dialogVisible=true">添加订单</el-button>-->
                    </el-col>
                </el-row>
                <template>
                    <el-table
                            :data="order_tableDate"
                            border stripe
                            style="width: 100%">
                        <el-table-column
                                type="index">
                        </el-table-column>
                        <el-table-column
                                prop="order_number"
                                label="订单编号">
                        </el-table-column>
                        <el-table-column
                                prop="order_price"
                                label="订单价格">
                        </el-table-column>
                        <el-table-column
                                prop="create_time"
                                label="创建时间">
                            <template slot-scope="scope">
                                {{new Date(scope.row.create_time).toLocaleString()}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="update_time"
                                label="更新时间">
                            <template slot-scope="scope">
                                {{new Date(scope.row.update_time).toLocaleString()}}
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="pay_status"
                                label="状态">
                            <template slot-scope="scope">  <!--作用域插槽：可获取当前列内容-->
                                <el-switch active-value="1"
                                           inactive-value="0"
                                            v-model="scope.row.pay_status" @change="setOrderState(scope.row)">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="order_set"
                                label="操作">
                            <template slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditMessage(scope.row.order_id)"></el-button>
                                <el-tooltip effect="dark" content="查看物流信息" placement="top" :enterable="false">
                                    <el-button type="warning" icon="el-icon-location" size="mini" @click="showGpsMessage(scope.row.order_id)"></el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="order_queryInfo.pagenum"
                            :page-sizes="[1,2,5,10]"
                            :page-size="order_queryInfo.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="order_pageTotal" :enterable="false">
                    </el-pagination>
                </template>
                <el-dialog
                        title="提示"
                        :visible.sync="order_add_dialogVisible"
                        width="50%" @close="closeAddDialog">
                    <el-form :model="order_addForm" status-icon :rules="order_addFormRules" ref="order_addFormRef"
                             label-width="100px"
                             class="demo-ruleForm">
                        <el-form-item label="订单号" prop="order_number">
                            <el-input v-model="order_addForm.order_number" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="订单价格" prop="order_price">
                            <el-input v-model="order_addForm.order_price" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态" prop="pay_status">
                            <el-input v-model="order_addForm.pay_status"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="order_add_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitAddForm">确 定</el-button>
          </span>
                </el-dialog>
                <el-dialog
                        title="提示"
                        :visible.sync="order_update_dialogVisible"
                        width="50%" @close="closeUpdateDialog" :close-on-click-modal="false">
                    <el-form :model="order_updateForm" status-icon :rules="order_updateFormRules" ref="order_updateFormRef"
                             label-width="100px"
                             class="demo-ruleForm">
                        <el-form-item label="订单号" prop="order_number">
                            <el-input v-model="order_updateForm.order_number" autocomplete="off" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="订单价格" prop="order_price">
                            <el-input v-model="order_updateForm.order_price"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态" prop="pay_status">
                            <el-input v-model="order_updateForm.pay_status"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="order_update_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
          </span>
                </el-dialog>
                <el-dialog
                        title="提示"
                        :visible.sync="order_delete_dialogVisible"
                        width="30%">
                    <span>你确定要删除用户{{this.order_updateForm.ordername}}吗？</span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="order_delete_dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="deleteOrder">确 定</el-button>
                  </span>
                </el-dialog>
                <el-dialog
                        title="查看物流信息"
                        :visible.sync="gps_dialogVisible"
                        width="40%">
                    <el-timeline :reverse="true">
                        <el-timeline-item
                                placement="top"
                                type="success"
                                v-for="(activity, index) in activities"
                                :key="index"
                                :timestamp="activity.time">
                            {{activity.context}}
                        </el-timeline-item>
                    </el-timeline>
                </el-dialog>
            </div>
        </el-card>
    </div>

</template>
<script>
    export default {
        created() {
            this.getOrderList();
        },
        data(){
            return{
                order_tableDate: [],
                order_queryInfo:{
                    query: '',
                    pagenum: 1,
                    pagesize: 5
                },
                gps_dialogVisible:false,
                activities:[],
                order_pageTotal:0,
                order_add_dialogVisible:false,   //添加用户对话框
                order_update_dialogVisible:false,//修改用户信息对话框
                order_delete_dialogVisible:false,//删除用户对话框
                order_addForm:{
                    order_number:'',
                    order_price:'',
                    pay_status:''
                },
                order_updateForm:{
                    order_number:'',
                    order_price:'',
                    pay_status:''
                },
                order_addFormRules:{
                    order_number:[
                        {
                            required:true,message:"请输入商品编号",trigger:"blur"
                        }
                    ],
                    order_price:[
                        {
                            required:true,message:"请输入商品价格",trigger:"blur"
                        }
                    ],
                    pay_status:[
                        {
                            required:true,message:"请输入商品状态",trigger:"blur"
                        }
                    ]
                },
                order_updateFormRules:{
                    order_number:[
                        {
                            required:true,message:"请输入商品编号",trigger:"blur"
                        }
                    ],
                    order_price:[
                        {
                            required:true,message:"请输入商品价格",trigger:"blur"
                        }
                    ],
                    pay_status:[
                        {
                            required:true,message:"请输入商品状态",trigger:"blur"
                        }
                    ]
                }
            }
        },
        methods:{
            async getOrderList() {
                const {data:result}=await this.$http.get("orders",{
                    params:this.order_queryInfo
                });
                if(result.meta.status!='200'){this.$message.error(result.meta.msg);}
                this.order_pageTotal=result.data.total;
                this.order_tableDate=result.data.goods;
                this.$message.success(result.meta.msg);
            },
            async setOrderState(orderInfo){
                const {data:result} = await this.$http.put(`orders/${orderInfo.order_id}`,orderInfo);
                if(result.meta.status!=201){
                    this.$message.error(result.meta.msg);
                }
                this.$message.success(result.meta.msg);
            },
            handleSizeChange(val) {
                //切换每页显示多少条
                //console.log(`每页 ${val} 条`);
                this.order_queryInfo.pagesize=val;
                this.getOrderList();
            },
            handleCurrentChange(val) {
                //切换当前页数
                //console.log(`当前页: ${val}`);
                this.order_queryInfo.pagenum=val;
                this.getOrderList();
            },
            //添加用户
            submitAddForm() {
                this.$refs['order_addFormRef'].validate(async valid => {
                    if (valid) {
                        const {data: result} = await this.$http.post("orders", this.order_addForm);
                        if (result.meta.status == 201) {
                            this.$message.success(result.meta.msg);
                            this.closeAddDialog();
                            this.getOrderList();
                        } else {
                            this.$message.error(result.meta.msg);
                        }
                    } else {
                        return false;
                    }
                });
            },
            //重置添加用户表单
            closeAddDialog(){
                this.order_add_dialogVisible = false;
                this.$refs['order_addFormRef'].resetFields();
            },
            //为修改栏提供默认用户信息
            async showEditMessage(id){
                const {data:result} = await this.$http.get(`orders/${id}`);
                if(result.meta.status==200){
                    this.$message.success(result.meta.msg);
                    this.order_updateForm=result.data;
                }else {
                    this.$message.error(result.meta.msg);
                }
                this.order_update_dialogVisible=true;
            },
            //查看物流信息
             showGpsMessage(id){
                const result={
                    "data": [
                        {
                            "time": "2018-05-10 09:39:00",
                            "ftime": "2018-05-10 09:39:00",
                            "context": "已签收,感谢使用顺丰,期待再次为您服务",
                            "location": ""
                        },
                        {
                            "time": "2018-05-10 08:23:00",
                            "ftime": "2018-05-10 08:23:00",
                            "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                            "location": ""
                        },
                        {
                            "time": "2018-05-10 07:32:00",
                            "ftime": "2018-05-10 07:32:00",
                            "context": "快件到达 [北京海淀育新小区营业点]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-10 02:03:00",
                            "ftime": "2018-05-10 02:03:00",
                            "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 23:05:00",
                            "ftime": "2018-05-09 23:05:00",
                            "context": "快件到达 [北京顺义集散中心]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 21:21:00",
                            "ftime": "2018-05-09 21:21:00",
                            "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 13:07:00",
                            "ftime": "2018-05-09 13:07:00",
                            "context": "顺丰速运 已收取快件",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 12:25:03",
                            "ftime": "2018-05-09 12:25:03",
                            "context": "卖家发货",
                            "location": ""
                        },
                        {
                            "time": "2018-05-09 12:22:24",
                            "ftime": "2018-05-09 12:22:24",
                            "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                            "location": ""
                        },
                        {
                            "time": "2018-05-08 21:36:04",
                            "ftime": "2018-05-08 21:36:04",
                            "context": "商品已经下单",
                            "location": ""
                        }
                    ],
                    "meta": { "status": 200, "message": "获取物流信息成功！" }
                }
                if(result.meta.status==200){
                    console.log(result.data)
                    this.activities=result.data;
                    this.$message.success(result.meta.message);
                    this.gps_dialogVisible=true;
                }else {
                    this.$message.error(result.meta.message);
                }
            },
            //提交更新用户信息
            submitUpdateForm(){
                this.$refs['order_updateFormRef'].validate(async valid => {
                    if (valid) {
                        const {data: result} = await this.$http.put(`orders/${this.order_updateForm.order_id}`, this.order_updateForm);
                        if (result.meta.status == 201) {
                            this.$message.success(result.meta.msg);
                            this.closeUpdateDialog();
                            this.getOrderList();
                        } else {
                            this.$message.error(result.meta.msg);
                        }
                    } else {
                        return false;
                    }
                });
            },
            //重置修改用户表单
            closeUpdateDialog(){
                this.order_update_dialogVisible = false;
                this.$refs['order_updateFormRef'].resetFields();
            },
            async deleteOrder(){
                const {data: result} = await this.$http.delete(`orders/${this.order_updateForm.order_id}`);
                if (result.meta.status == 200) {
                    this.$message.success(result.meta.msg);
                    this.order_delete_dialogVisible=false;
                    this.getOrderList();
                } else {
                    this.$message.error(result.meta.msg);
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    .order_table {
        .order_table_header{
            .order_search_input {
                width: 30%;
                float: left;
            }
            .order_search_button {
                background-color:#DCDFE6;
                box-shadow: 0 0 10px #ddd;//加阴影，向外扩散10像素
                float: left;
                width: 6%;
            }
            .order_add_button{
                width: 10%;
                padding-left: 20px;
                float: left;
            }
        }

    }
</style>